<script setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';

const pdfSection = ref(null);

useHead({
	title: 'HLS: Отчет по льготе',
})

const user = useCookie('user');

if (user.value == null) {
	navigateTo('/login');
}

const mpp = useCookie('mpp');
const urlHome = useUrl();
const pend = ref('')
pend.value = false;
const list = ref([]);
const doc_mpp = ref(0);
const lpu_id = ref(0);
const isOpen = ref(false);

async function openDocNaryadsModal(mpp, lpu) {
	doc_mpp.value = mpp;
	lpu_id.value = lpu;
	console.log("doc_mpp", doc_mpp.value, "lpu_id", lpu_id.value)
	await getDocNaryads()
	isOpen.value = true;
}

const { data: nar_in_work } = await useFetch(`${urlHome.value}lab/open_naryads/`, {
	query: {
		mpp: mpp.value
	}
})


const { data: docNaryads, refresh: getDocNaryads } = await useFetch(`${urlHome.value}lab/open_naryads_by_doc/`, {
	immediate: false,
	query: {
		mpp: doc_mpp,
		lpu: lpu_id
	},
}
)
// list.value = nar_in_work.value.lgot_in_work
// console.log(list.value)

// const { data: list_lgot } = await useFetch(urlHome.value + 'naryad/get_lgot_columns/')
// columns.value = list_lgot.value.list_lgot
// console.log(list_lgot.value.list_lgot)

// for (let x of columns.value) console.log(x)
// KTN  NKTN
// 3  Участники ВОВ
// 4  Ветераны боевых действий
// 6  Бывшие несовершеннолетние узники концлагерей
// 7  Лица, подвергшиеся политическим репрессиям
// 8  Военнослужащие, проход.военную службу(1941 - 45г.) в воинских частях, не входящих в состав действ.армии и нагр.медалями
// 9  Труженики тыла, проработавшие в тылу не менее 6 - ти месяцев, награжденные орденами и медалями
// 12  Дети до 3 - х лет
// 13  Дети многодетных семей до 6 лет
// 14  Дети инвалиды в возрасте до 18 лет.
// 40  Родители, вдовы, дети военносл., погибших при исполнении служебного долга
// 41  Блокадники Ленинграда, награжденные медалью
// 43  Родители и жены погиб.военносл., приравн.к участн.ВОВ
// 73  Многодетная мать
// 105  Родители, вдовы ИВОВ, УВОВ, Героев Советского Союза и пр.
// 112  Ветераны труда




</script>
<style>
.list-complete-item {
	transition: all 0.8s ease;
	display: inline-block;
	margin-right: 10px;
}

.list-complete-enter-from,
.list-complete-leave-to {
	opacity: 0;
	transform: translateY(30px);
}

.list-complete-leave-active {
	position: absolute;
}
</style>

<template>
	<div class="m-4">
		<UButton label="скачать PDF"
			@click="exportToPDF('my-pdf-file.pdf', pdfSection, { orientation: 'l', floatPrecision: 'smart', precision: 16 }, {})" />
		<div v-if="pend">
			<LoadFetchAnimation></LoadFetchAnimation>
		</div>
		<div v-else ref="pdfSection">
			<div v-for="element in nar_in_work.lpu_list" :key="element">
				<ReportZavOpenContainer :report="element" :openModal="openDocNaryadsModal" />
			</div>

		</div>
		<UModal v-model="isOpen" :ui="{ base: 'max-w-4xl', width: '' }">
			<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
				<template #header>
					<div class="flex place-items-end">
						<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1"
							@click="isOpen = false" />
					</div>
				</template>
				<table id="lgottable" class="text-center">
					<thead>
						<tr>
							<th>№п/п</th>
							<th>№ Наряда</th>
							<th>Пациент</th>
							<th>Дата</th>
							<th>Сумма</th>
							<th>В работе (дней)</th>
						</tr>
					</thead>
					<tbody>
						<template
							v-for="( naryad, index ) in docNaryads.sort((a, b) => new Date(a.dou) - new Date(b.dou))"
							class="flex gap-2 text-right font-mono place-content-evenly">
							<tr>
								<td class="font-mono">{{ index + 1 }}</td>
								<td class="font-mono">{{ naryad?.nkv }}</td>
								<td>{{ naryad.patient.fam }} {{ naryad.patient.im }} {{ naryad.patient.ot }}</td>
								<td class="font-mono">{{ naryad?.dou ? dayjs(naryad.dou).format('DD.MM.YYYY') : "" }}
								</td>
								<td class="text-right font-mono"> {{ naryad.stu.toLocaleString() }}</td>
								<td class="font-mono"> {{ ~~((new Date() - new Date(naryad.dou)) / (1000 * 60 * 60 *
									24)) }}</td>
							</tr>
						</template>
					</tbody>
				</table>
			</UCard>
		</UModal>
	</div>
</template>

<style scoped>
#lgottable {
	font-family: Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 100%;
}

#lgottable td,
#lgottable th {
	border: 1px solid #ddd;
	padding: 8px;
}

#lgottable tr:nth-child(even) {
	background-color: #f2f2f2;
}

#lgottable tr:hover {
	background-color: #ddd;
}

#lgottable th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: center;
	background-color: #04AA6D;
	color: white;
}
</style>